<html>

    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            div,
            ul,
            li {
                margin: 0;
                padding: 0;
            }

            ul {
                line-style: none;
            }

            .select {
                position: relative;
                width: 134px;
                min-width: 134px;
                height: 36px;
                border: 1px solid #eee;
                cursor: pointer;
            }

            .select:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 10px;
                margin-top: -2px;
                border-top: 5px solid #666;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
            }

            .select .select_text {
                padding: 0 20px 0 10px;
                height: 36px;
                line-height: 36px;
            }

            .select_ul {
                display: none;
                position: absolute;
                top: 34px;
                left: -1px;
                width: 134px;
                min-width: 134px;
                border: 1px solid #D4D4D4;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
                background: #fff;
            }

            .select_ul li {
                line-height: 36px;
                text-indent: 10px;
            }

            .select_ul li:hover {
                color: #fff;
                background: #6AA7EA;
            }

            .select_ul li.cur {
                color: #fff;
                background: #195DA3;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            ;
            (function($) {
                //默认参数
                var defaluts = {
                    select: "select",
                    select_text: "select_text",
                    select_ul: "select_ul"
                };
                $.fn.extend({
                    "select": function(options) {
                        var opts = $.extend({}, defaluts, options);
                        return this.each(function() {
                            var $this = $(this);
                            //模拟下拉列表
                            if($this.data("value") !== undefined && $this.data("value") !== '') {
                                $this.val($this.data("value"));
                            }
                            var _html = [];
                            _html.push("<div class=\"" + $this.attr('class') + "\">");
                            _html.push("<div class=\"" + opts.select_text + "\">" + $this.find(":selected").text() + "</div>");
                            _html.push("<ul class=\"" + opts.select_ul + "\">");
                            $this.children("option").each(function() {
                                var option = $(this);
                                if($this.data("value") == option.val()) {
                                    _html.push("<li class=\"cur\" data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                                } else {
                                    _html.push("<li data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                                }
                            });
                            _html.push("</ul>");
                            _html.push("</div>");
                            var select = $(_html.join(""));
                            var select_text = select.find("." + opts.select_text);
                            var select_ul = select.find("." + opts.select_ul);
                            $this.after(select);
                            $this.hide();
                            //下拉列表操作
                            select.click(function(event) {
                                $(this).find("." + opts.select_ul).slideToggle().end().siblings("div." + opts.select).find("." + opts.select_ul).slideUp();
                                event.stopPropagation();
                            });
                            $("body").click(function() {
                                select_ul.slideUp();
                            });
                            select_ul.on("click", "li", function() {
                                var li = $(this);
                                var val = li.addClass("cur").siblings("li").removeClass("cur").end().data("value").toString();
                                if(val !== $this.val()) {
                                    select_text.text(li.text());
                                    $this.val(val);
                                    $this.attr("data-value", val);
                                }
                            });
                        });
                    }
                });
            })(jQuery);
        </script>
    </head>

    <body>
        <select class="select" name="state" data-value="0">
            <option value="0">请选择</option>
            <option value="1">广州市</option>
            <option value="2">深圳市</option>
            <option value="3">湛江市</option>
            <option value="4">北京市</option>
        </select>

        <script type="text/javascript">
            $(function() {
                $('select.select').select();
            });
        </script>
    </body>

</html>